<% presenter = Courses::ApplyPresenter.new(self, @course, @show_checkbox_recaptcha) %>
<% content_for(:head) do %>
  <title><%= presenter.page_title %></title>
<% end %>
<div class="flex items-center justify-center min-h-screen bg-gray-50">
  <div class="w-full py-8">
    <div class="container max-w-lg px-3 mx-auto">
      <div
        class="relative flex flex-col overflow-hidden bg-white border rounded-lg shadow-xl"
      >
        <div class="flex flex-col text-white text-gray-900 bg-gray-50">
          <div class="relative pb-1/2 bg-primary-900">
            <% if presenter.thumbnail_url.present? %>
              <img
                class="absolute object-cover w-full h-full"
                src="<%= presenter.thumbnail_url %>"
              />
            <% else %>
              <div
                class="absolute w-full h-full course-apply__cover-default svg-bg-pattern-1"
              ></div>
            <% end %>
          </div>
        </div>
        <div>
          <div class="p-4 pt-5 md:px-12 md:py-12 md:pt-10">
            <%= form_with( url: apply_course_path(@course), method: :post, class: 'flex flex-col', local: true) do |f| %>
              <h4 class="font-bold">
                <%= t('.heading', course_name: presenter.course_name) %>
              </h4>
              <div class="w-full">
                <div class="mt-4">
                  <label
                    for="email"
                    class="inline-block text-xs font-semibold tracking-wide"
                  >
                    <%= t('.email_label') %>
                  </label>
                  <%= f.email_field :email, value: params[:email], maxlength: 256, placeholder: t('.email_placeholder'), required: true, class: 'block w-full h-10 px-4 py-2 mt-1 text-sm border border-gray-300 rounded appearance-none bg-gray-50 hover:bg-gray-50 focus:outline-none focus:bg-white focus:border-primary-400' %>
                </div>
                <div class="mt-4">
                  <label
                    for="name"
                    class="inline-block text-xs font-semibold tracking-wide"
                  >
                    <%= t('.name_label') %>
                  </label>
                  <%= f.text_field :name, value: params[:name], maxlength: 128, placeholder: t('.name_placeholder'), required: true, class: 'block w-full h-10 px-4 py-2 mt-1 text-sm border border-gray-300 rounded appearance-none bg-gray-50 hover:bg-gray-50 focus:outline-none focus:bg-white focus:border-primary-400' %>
                </div>
                <%= render 'shared/recaptcha', v2: @show_checkbox_recaptcha, action: 'public_course_enrollment' %>
              </div>
              <%= f.submit t('.apply_button'), data: { disable: true }, class: "w-full mt-6 text-center btn btn-primary btn-large" %>
            <% end %>
          </div>
        </div>
      </div>
      <div class="mt-4 text-center text-gray-600">
        <% if presenter.terms_and_conditions? %>
          <a
            href="/agreements/terms-and-conditions"
            class="text-xs cursor-pointer hover:text-primary-500"
          >
            <%= t('.terms_and_conditions') %>
          </a>
        <% end %>
        <% if presenter.terms_and_conditions? && presenter.privacy_policy? %>
          <span class="px-4 text-gray-500">&vert;</span>
        <% end %>
        <% if presenter.privacy_policy? %>
          <a
            href="/agreements/privacy-policy"
            class="text-xs cursor-pointer hover:text-primary-500"
          >
            <%= t('.privacy_policy') %>
          </a>
        <% end %>
      </div>
    </div>
  </div>
</div>
